<html xmlns="http://www.w3c.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Prime Faces</title>
        <style type="text/css">
            .ui-fileupload {
                width: 800px;
                margin: 0 auto;
            }
        </style>
    </h:head>
    <h:body>
        <h:outputText value="PrimeFaces Single Upload" 
                      style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
            <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                          mode="advanced"
                          update="messages"
                          label="Choose a file"
                          sizeLimit="10485760"
                          allowTypes="/(\.|\/)(gif|jpg|png)$/"
                          invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
                          invalidFileMessage="You are allowed to upload only images !"/>
            <p:growl id="messages" showDetail="true" sticky="true"/>
        </h:form>

        <h:outputText value="PrimeFaces Multiple Upload" 
                      style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
            <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                          mode="advanced"
                          update="messages"
                          label="Choose a file"
                          sizeLimit="10485760"
                          multiple="true"
                          allowTypes="/(\.|\/)(ogg|mp3|dss|ds2)$/"
                          invalidSizeMessage="The maximum file size allowed is 10 Megabytes !"
                          invalidFileMessage="You are allowed to upload only images !"
                          />
            <p:growl id="messages" showDetail="true" life="5000"/>
        </h:form>
        <h:outputText value="PrimeFaces Auto Upload" 
                      style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
            <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                          mode="advanced"
                          update="messages"
                          label="Choose a file"
                          auto="true"
                          sizeLimit="10485760"
                          allowTypes="/(\.|\/)(ogg|mp3|dss|ds2)$/"
                          invalidSizeMessage="The maximum file size allowed is 10 Megabytes !"
                          invalidFileMessage="You are allowed to upload only images !"
                          />
            <p:growl id="messages" showDetail="true" life="5000"/>
        </h:form>

        <h:outputText value="PrimeFaces Drag and Drop Upload" 
                      style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
            <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                          mode="advanced"
                          update="messages"
                          label="Choose a file or drag and drop it here"
                          sizeLimit="10485760"
                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                          invalidSizeMessage="The maximum file size allowed is 10 Megabytes !"
                          invalidFileMessage="You are allowed to upload only images !"
                          />
            <p:growl id="messages" showDetail="true" life="5000"/>
        </h:form>
    </h:body>
</html>